<template>
  <div
    class="page"
    :style="{ height: clientHeight + 'px'}"
  >
    <div class="page-header">
      <img
        class="page-header-flower"
        src="../assets/imgs/flower1.png"
        alt=""
      >
      <div class="page-header-main text-center">
        <h2>鸣人</h2>
        <img
          class="margin-top"
          src="../assets/imgs/heart.png"
          width="20"
          height="20"
          alt=""
        >
        <h2>雏田</h2>
        <img
          class="page-header-main-img"
          src="../assets/imgs/rope2.png"
          alt=""
        >
        <h3 class="margin-tb">2021年11月8日12是08分</h3>
        <h3>农历:十月初四(周一)</h3>
      </div>
      <div class="page-header-footer">
        <img
          class="page-header-footer-leftImg"
          src="../assets/imgs/bird-left.png"
          alt=""
        >
        <img
          class="page-header-footer-beltImg"
          src="../assets/imgs/belt.png"
          alt=""
        >
        <img
          class="page-header-footer-wedding"
          src="../assets/imgs/wedding.png"
          alt=""
        >
        <img
          class="page-header-footer-rightImg"
          src="../assets/imgs/bird-right.png"
          alt=""
        >
      </div>
    </div>
    <div class="page-content">
      <img
        class="page-content-bg"
        src="../assets/imgs/bg2.png"
        alt=""
      >
      <img
        class="page-content-repe"
        src="../assets/imgs/rope1.png"
        alt=""
      >
      <img
        class="page-content-card"
        src="../assets/imgs/card1.png"
        alt=""
      >
    </div>
    <div class="page-footer">
      <img
        class="page-footer-welcome"
        src="../assets/imgs/welcome.png"
        alt=""
      >
      <br />
      <img
        class="page-footer-ahead"
        src="../assets/imgs/ahead.png"
        alt=""
        @click="goFirst"
      >
    </div>
  </div>

</template>

<script>
import { ref } from "vue";
import { useRouter } from "vue-router";
export default {
  name: "home",
  setup(props, cxt) {
    const clientHeight = ref(document.documentElement.clientHeight);
    const router = useRouter();
    const goFirst = () => {
      router.push("/firstPage");
    };
    return {
      clientHeight,
      goFirst,
    };
  },
};
</script>

<style scoped lang='scss'>
.page {
  &-header {
    padding: 20px;
    position: relative;
    &-flower {
      width: 100%;
      height: 100%;
      animation: flowerFly 2s ease-in-out alternate both;
    }
    &-main {
      position: absolute;
      top: 45%;
      left: 50%;
      transform: translate(-50%, -50%);
      animation: mainFly 2s ease-in-out alternate both;
      &-img {
        width: 120px;
      }
    }
    &-footer {
      &-leftImg {
        width: 95px;
        height: 95px;
        position: absolute;
        top: 80.5%;
        left: 20%;
        transform: translate(-50%, -50%);
        animation: leftImgFly 2s ease-in-out alternate both;
        z-index: 999;
      }
      &-beltImg {
        width: 200px;
        position: absolute;
        top: 81%;
        left: 50%;
        transform: translate(-50%, -50%);
        animation: beltImgFly 2s ease-in-out alternate both;
      }
      &-wedding {
        width: 120px;
        height: 39px;
        position: absolute;
        top: 77%;
        left: 50%;
        transform: translate(-50%, -50%);
        animation: weddingFly 2s ease-in-out alternate both;
      }
      &-rightImg {
        width: 95px;
        height: 95px;
        position: absolute;
        top: 80%;
        left: 81%;
        transform: translate(-50%, -50%);
        animation: rightImgFly 2s ease-in-out alternate both;
        z-index: 999;
      }
    }
  }
  &-content {
    position: relative;
    &-bg {
      width: 100%;
      height: 100%;
      animation: bgFly 2s ease-in-out alternate both;
    }
    &-repe {
      position: absolute;
      top: 38%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 999;
      animation: repeFly 2s ease-in-out alternate both;
    }
    &-card {
      width: 100px;
      position: absolute;
      top: 50%;
      left: 52%;
      transform: translate(-50%, -50%);
      animation: cardFly 2s ease-in alternate both;
    }
  }
  &-footer {
    text-align: center;
    &-welcome {
      width: 150px;
      animation: fadeInOut 3s ease-in-out both alternate;
    }
    &-ahead {
      width: 30px;
      animation: TbShake 3s linear infinite;
    }
  }
}
@keyframes flowerFly {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes mainFly {
  0% {
    left: 50%;
    top: 30%;
    opacity: 0;
  }
  100% {
    top: 45%;
    left: 50%;
  }
}
@keyframes leftImgFly {
  0% {
    left: 10%;
    top: 80.5%;
    opacity: 0;
  }
  100% {
    top: 80.5%;
    left: 20%;
  }
}
@keyframes rightImgFly {
  0% {
    left: 90%;
    top: 80.5%;
    opacity: 0;
  }
  100% {
    top: 80%;
    left: 81%;
  }
}
@keyframes beltImgFly {
  0% {
    left: 50%;
    top: 90%;
    opacity: 0;
  }
  100% {
    top: 81%;
    left: 50%;
  }
}
@keyframes weddingFly {
  0% {
    left: 50%;
    top: 90%;
    opacity: 0;
  }
  100% {
    top: 77%;
    left: 50%;
  }
}
@keyframes bgFly {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes repeFly {
  0% {
    left: 50%;
    top: 50%;
    opacity: 0;
  }
  100% {
    top: 38%;
    left: 50%;
  }
}
@keyframes cardFly {
  0% {
    left: 80%;
    top: 50%;
    opacity: 0;
  }
  100% {
    top: 50%;
    left: 52%;
  }
}
@keyframes fadeInOut {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  75% {
    opacity: 1;
  }
}
@keyframes TbShake {
  0%,
  100%,
  20%,
  50%,
  80% {
    transition-timing-function: cubic-bezier(
      0.215,
      0.61,
      0.355,
      1
    ); /*贝塞尔曲线 ： X1 Y1 X2 Y2*/
    transform: translate3d(0, 0, 0); /*设置只在Z轴上移动*/
  }
  40%,
  43% {
    transition-timing-function: cubic-bezier(0.755, 0.5, 0.855, 0.06);
    transform: translate3d(0, -30px, 0);
  }
  70% {
    transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -15px, 0);
  }
  90% {
    transform: translate3d(0, -4px, 0);
  }
}
</style>